<style scoped>
  #driverList {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    background-color: #fff;
  }

  .searchbar {
    position: relative;
    padding: 8px 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    background-color: #EFEFF4;
  }

  .searchbar::before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #D7D6DC;
    color: #D7D6DC;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .searchbar::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #D7D6DC;
    color: #D7D6DC;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .searchbar input {
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    flex: auto;
    background-color: #fff;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    border-radius: 3px;
    text-indent: 5px;
  }

  .searchBtn {
    display: inline-block;
    font-size: 14px;
    line-height: 28px;
    padding: 0 8px;
    color: #3CC51F;
  }

  .searchBody {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .weui-cells {
    margin-top: 1.17647059em;
    background-color: #FFFFFF;
    line-height: 1.41176471;
    font-size: 14px;
    overflow: hidden;
    position: relative;
  }

  .weui-cells::before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .weui-cells::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .weui-cell {
    padding: 10px 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .weui-cell::before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    left: 15px;
  }

  .weui-cell__bd {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }

  .weui-cell__ft {
    text-align: right;
    color: #999999;
  }
</style>
<template>
  <div id="driverList">
    <div class="searchbar">
      <input type="text" v-model="searchInput" @input="searchDriveList" >
      <a href="javascript:void(0);" class="searchBtn" @click="close">关闭</a>
    </div>
    <div class="searchBody" v-infinite-scroll="getDriverList" infinite-scroll-disabled="busy"
         infinite-scroll-distance="30">
      <div class="weui-cells">
        <div class="weui-cell" v-for="(item,index) in driverList" @click="chooseDirver(index)">
          <div class="weui-cell__bd">
            <p>{{item.employeeName}}</p>
          </div>
          <div class="weui-cell__ft">{{item.depName}}</div>
        </div>
      </div>
    </div>
    <!--正在加载提示框-->
    <loading v-if="loadShow"></loading>
  </div>
</template>
<script>
  import http from '../assets/js/http_mixin'
  import interfaceAPI from '../assets/js/insterface.js';
  var userListPage = interfaceAPI.userListPage;
  export default {
    props: ['depId'],
    data(){
      return {
        driverList: [],              // 司机列表
        searchInput: '',             // 搜索框的值
        pageTotle: '',               // 总页数
        busy: false,
        count: 0                     // 当前页
      }
    },
    mixins: [http],
    methods: {
      getDriverList() {
        var params = {
          depId: this.depId,
          currentPage: this.count,
          pageSize: '20',
          searchParam: this.searchInput,
          searchMethod: 'carEmp'
        };
        this.getInfo({
          url: userListPage,
          param: params,
          success(response){
            var resopnseData = response.data.data;
            this.pageTotle = response.data.pages;
            if (this.pageTotle > this.count) {
              if (resopnseData.length > 0) {
                for (var i = 0; i < resopnseData.length; i++) {
                  this.driverList.push(resopnseData[i]);
                }
              }
              this.count++;
            }
            this.busy = false;
          },
          fail: function (response) {
            this.dialogMessage = '请求失败，请稍后再试';
            this.dialogShow = true;   // 弹出提示信息
          }
        });
      },
      chooseDirver(index){
        this.$emit('chooseDirver', this.driverList[index]);
      },
      close(){
        this.$emit('close');
      },
      searchDriveList(){
        this.count = 0;
        this.driverList = [];
        this.getDriverList();
      }
    }
  }
</script>
